<template>
  <CommonHeader bgImage="https://ik.imagekit.io/mpjl8xreo/photo.png">
    <h1 class="title">相册</h1>
  </CommonHeader>
  <div class="container">
    <List
      :List="PhotoList"
      :Pagination="true"
      :page="page"
      :pageSize="pageSize"
      @changePage="changePage"
      @changeRoute="changeRoute"
    >
      <template v-slot:content="{ item }">
        <img :src="item['cover']" alt="" style="width: 100%; height: 180px" />
        <div class="card-info">
          <h1>{{ item["name"] }}</h1>
          <p class="info-more">
            <span
              >创建日期：
              {{ dayjs(item.createDate).format("YYYY-MM-DD") }}</span
            >
            <span v-if="item.total !== 0">
              共
              <i style="color: skyblue; margin: 0 5px">{{ item.total }}</i>
              张照片</span
            >
            <span v-else>暂无上传照片</span>
          </p>
        </div>
      </template>
    </List>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue";
import List from "@/components/List/index.vue";
import CommonHeader from "@/components/CommonHeader/index.vue";
import { getAllPhoto } from "@/api/photo.js";
import dayjs from "dayjs";
import router from "@/router/index.js";

const { proxy } = getCurrentInstance();
let pageSize = ref(5);
let page = ref(1);

const PhotoList = ref([]);
const getPhotoList = async () => {
  let res = await getAllPhoto({ userId: 1 });
  if (res && res.status === 200) PhotoList.value = res.data;
};

// 切换分页
const changePage = (val) => {
  getSortList({ page: val });
};

// 点击跳转到相册详情
const changeRoute = (id) => {
  setTimeout(() => {
    router.push("/photoDetail/" + id);
  }, 0);
};
getPhotoList();
</script>

<style lang="scss" scoped>
@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: #ffff;
  font-weight: bold;
}

.container {
  animation: profile_in 0.8s;

  .card-info {
    width: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #fafafa;

    h1 {
      width: 100%;
      font-size: 16px;
      color: #606266;
      @include ellipsis;
    }

    p {
      width: 100%;
      font-size: 12px;
      color: #a8abb2;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
